<template>
	<view class="container">
		<view class="top">
		</view>
		<view class="middle u-m-l-20">
			<view class="middle-xz u-p-t-35">
				<view class="xzggbm u-m-l-50 u-flex u-row-center ">
					<image  src="../../static/img/jiahao.png" mode=""></image>
					<text class="u-font-32 u-m-l-10" >新增广告版面</text>
				</view>
				<view class="ggff u-flex u-p-b-20 u-m-l-28 u-m-r-10 u-border-bottom u-row-between u-row-center u-m-t-50">
					<text class="u-font-30">广告版面</text>
					<image  src="../../static/register/xy.png" mode=""></image>
				</view>
				<view class="u-flex u-p-b-20 u-m-l-28 u-font-30 u-m-r-20 u-border-bottom u-row-between u-row-center u-m-t-30">
					<text >版面编号</text>
					<text >自动生成</text>
				</view>
				<view class="ggff u-flex u-p-b-20 u-m-l-28 u-m-r-10 u-border-bottom u-row-between u-row-center u-m-t-30">
					<text class="u-font-30">服务时长</text>
					<image  src="../../static/register/xy.png" mode=""></image>
				</view>
				<view class="u-flex u-p-b-20 u-m-l-28 u-font-30 u-m-r-20 u-border-bottom u-row-between u-row-center u-m-t-30">
					<text>服务费用</text>
					<text style="color: #FE5022;">1000元</text>
				</view>
			</view>
			<view class="middle-gg u-m-t-20">
				<view class="" v-for="(item,index) in ad" :key="index">
					<view class="u-p-t-45 u-font-30 u-m-l-20 u-flex">
						<image style="width: 34rpx; height: 29rpx;" src="../../static/img/gg.png" mode=""></image>
						<text style="color: #4B9CFF;" class="u-m-l-15">广告{{index+1}}</text>
					</view>
					<view class=" u-flex u-p-b-20 u-m-l-28 u-m-r-10 u-border-bottom u-row-between u-row-center u-m-t-36">
						<text class="u-font-30">广告版面</text>
						<view class="u-flex ggzs">
							<text class="u-font-30">{{item.ggbm}}</text>
							<image  src="../../static/register/xy.png" mode=""></image>
						</view>
					</view>
					<view class="  u-flex u-p-b-20 u-m-l-28 u-font-30 u-m-r-20 u-border-bottom u-row-between u-row-center u-m-t-36">
						<text >版面编号</text>
						<text style="color: #888D99;" >{{item.bmbh}}</text>
					</view>
					<view class=" u-flex u-p-b-20 u-m-l-28 u-m-r-10 u-border-bottom u-row-between u-row-center u-m-t-36">
						<text class="u-font-30">服务时长</text>
						<view class="u-flex ggzs">
							<text class="u-font-30">{{item.fwsc}}</text>
							<image  src="../../static/register/xy.png" mode=""></image>
						</view>
					</view>
					<view class="  u-flex u-p-b-20 u-m-l-28 u-font-30 u-m-r-20 u-border-bottom u-row-between u-row-center u-m-t-36">
						<text >服务费用</text>
						<text style="color: #888D99;" >{{item.fwfy}}元</text>
					</view>
				</view>
				<view class="u-flex u-m-l-28 u-row-between u-m-t-30 u-m-r-28">
					<text class="u-font-30">服务费用总金额：</text>
					<text style="color: #FE5022;" class="u-font-40">￥{{zje}}</text>
				</view>
			</view>
			<view class="middle-fwfzf u-m-t-20">
				<view class="u-flex u-m-l-28 u-p-t-30">
					<image style="width: 44rpx; height: 34rpx;" src="../../static/img/cck.png" mode=""></image>
					<text class="u-m-l-15" style="color: #4B9CFF; font-size: 36rpx; font-weight: bold;">服务费支付</text>
				</view>
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="支付金额" prop="zfje">
						<u-input :border="border" placeholder="请输入金额  元" v-model="model.zfje" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="支付比例" prop="zfbl">
						<u-input :border="border" placeholder="请输入金额  %" v-model="model.zfbl" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="true" label="支付次数" prop="zfcs">
						<u-input :border="border" placeholder="请输入次数  次" v-model="model.zfcs" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="  zwpj u-m-l-20  " :label-position="labelPosition"  prop="bcsm">
						<u-input  type="textarea" :border="border" placeholder="请输入支付补充说明" v-model="model.bcsm" />
					</u-form-item>
				</u-form>
				<u-button class="button" @click="submit">确认支付</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				zje: 0,
				ad:[
					{
						ggbm: '横幅广告',
						bmbh: '012689397',
						fwsc: '72小时',
						fwfy: 1000,
					},
					{
						ggbm: '横幅广告',
						bmbh: '012689397',
						fwsc: '72小时',
						fwfy: 1000,
					}
				],
				/**
				 * form验证
				 * */
				model: {
					zflb: '',
					zfje: '',
					zfbl: '',
					bcsm: '',
				},
			}
		},
		onLoad(options){
		},
		mounted() {
			for (let item of this.ad) {
				this.zje += item.fwfy
			}
		},
		methods:{
		},
		
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f4f4f4;
	}
	.top{
		width: 750rpx;
		height: 300rpx;
		background: linear-gradient(0deg, #AB61FF, #DF61FF);
	}
	.middle-xz{
		width: 710rpx;
		height: 510rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: -250rpx;
	}
	.xzggbm{
		width: 600rpx;
		height: 80rpx;
		border: 2rpx solid #4B9CFF;
		border-radius: 40rpx;
		image{
			height: 30rpx; width: 30rpx;
		}
		text{
			color: #4B9CFF;
		}
	}
	.ggff{
		image{
			height: 48rpx; width: 48rpx;
		}
	}
	.middle-gg{
		width: 710rpx;
		// height: 1006rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.ggzs{
		text{
			color: #888D99;
		}
		image{
			height: 48rpx; width: 48rpx;
		}
	}
	.middle-fwfzf{
		width: 710rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.zwpj{
		width: 670rpx;
		height: 225rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
	.button {
		width: 662rpx;
		margin:70rpx auto 65rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;
		&.u-hairline-border:after {
			border: 0;
		}
	}
</style>
